* {
    padding: 0;
    margin: 0;
    font-size: 16px;
}

.head_text {
    display: inline;
    padding-bottom: 8px;
    font-size: 24px;
    border-bottom: 4px solid rgb(240,224,24);
}

html {
    height: 100%;
    background-image: linear-gradient(to bottom right, rgb(112,136,248), rgb(128,88,176));
}

.login-card {
    display: flex;
    margin: 16% auto 0;
    width: 480px;
    height: 280px;
    border-radius: 8px;
    box-shadow: 0 16px 48px 0 rgba(56,48,160,.48);
    background: rgb(96,64,192);
}

.login-card .left-card {
    position: relative;
    padding: 24px 48px;
    width: 64%;
    border-radius: 8px 0 0 8px;
    background: #fff;
}

.login-card .left-card .head_text {
    color: #222;
    border-bottom: 4px solid rgb(96,64,192);
}

.login-card .left-card input {
    display: block;
    margin: 24px 0;
    padding: 8px 0;
    width: 100%;
    outline: 0;
    color: #fff;
    border: 0;
    border-bottom: 1px solid rgb(200,192,216);
    background: none;
    transition: .24s;
}

.login-card .left-card input:hover {
    border-bottom-color: rgb(96,64,192);
}

.login-card .left-card ::placeholder {
    color: rgb(200,192,216);
}

.login-card .left-card .message {
    position: absolute;
    bottom: 40px;
    text-decoration: none;
    color: rgb(200,192,216);
    transition: .24s;
    cursor: pointer;
}

.login-card .left-card .message:hover {
    color: rgb(96,64,192);
}

.login-card .left-card .action {
    position: absolute;
    bottom: 8px;
    right: 24px;
    width: 96px;
    height: 32px;
    line-height: 16px;
    border: none;
    border-radius: 16px;
    background: rgb(96,64,192);
}

.login-card .left-card .action:hover {
    color: rgb(240,224,24);
    box-shadow: 0 4px 16px rgba(96,64,192,.48);
}

.login-card .right-card {
    padding: 24px;
    width: 36%;
    text-align: center;
    color: #fff;
}

.login-card .right-card .regist {
    display: block;
    margin: 128px auto;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-decoration: none;
    color: rgb(200,192,216);
    border: solid 1px rgb(200,192,216);
    border-radius: 50%;
}

.login-card .right-card .regist:hover {
    color: rgb(96,64,192);
    border: solid 1px rgb(240,224,24);
    background: rgb(240,224,24);
}